<!--
@description: 复杂表格实现
-->

<template>
  <div style="padding: 20px;">
    <el-table 
      :data="tableData" 
      :span-method="objectSpanMethod" 
      :row-class-name="tableRowClassName"
      :cell-class-name="tableCellClassName" 
      :header-cell-class-name="tableHeaderCellClassName" 
      border 
      :header-cell-style="head"
    >
      <el-table-column>
        <template #header="">
          <div class="first-head">
            <div class="month">月份</div>
            <div class="line"></div>
            <div class="arg">参数</div>
          </div>
        </template>
        <el-table-column prop="arg1" width="100" align="center" />
        <el-table-column prop="arg2" width="100" align="center" />
      </el-table-column>
      <el-table-column v-for="(item, index) in tableHead" :key="index" :label="item" :prop="item" align="center">
        <template #default="scope">
          <div class="p-x-10px">{{ scope.$index < 2 ? scope.row[item] : '72' }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang='ts'>
/* ------------------------ 导入 与 引用 ----------------------------------- */
import { ref } from 'vue'
const tableHead = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
const tableData = ref([
  {
    arg1: '目标',
    arg2: '季度目标',
    '1月': 1,
    '2月': 2,
    '3月': 3,
    '4月': 4,
    '5月': 5,
    '6月': 6,
    '7月': 7,
    '8月': 8,
    '9月': 9,
    '10月': 10,
    '11月': 11,
    '12月': 12
  },
  {
    arg1: '用电量(kwh)',
    arg2: '月度目标',
    '1月': 1,
    '2月': 2,
    '3月': 3,
    '4月': 4,
    '5月': 5,
    '6月': 6,
    '7月': 7,
    '8月': 8,
    '9月': 9,
    '10月': 10,
    '11月': 11,
    '12月': 12
  },
  {
    arg1: '总销售额',
  },
])
// 表头处理
const head = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {
    //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
    return { padding: 0 }
  }
  if (rowIndex === 1) {
    //这里为了是将第二列的表头隐藏，就形成了合并表头的效果
    return { display: 'none', padding: 0 }
  }
}
// 合并处理
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  if (columnIndex === 0 && rowIndex < 2) {
    if (rowIndex % 2 === 0) {
      return {
        rowspan: 2,
        colspan: 1
      }
    } else {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
  if (rowIndex === 0) {
    if (columnIndex > 1 && (columnIndex - 2) % 3 === 0) {
      return {
        rowspan: 1,
        colspan: 3
      }
    } else if (columnIndex > 1) {
      return {
        rowspan: 0,
        colspan: 0
      }
    }
  }
  if (rowIndex === 2) {
    if (columnIndex === 0) {
      return [1, 2]
    } else if (columnIndex === 3) {
      return [1, 12]
    } else {
      return [0, 0]
    }
  }
}
const tableRowClassName = ({ row,rowIndex }) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
}
const tableCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0 && columnIndex === 0) {
    return 'success-column'
  }
}
const tableHeaderCellClassName = ({ row, column, rowIndex, columnIndex }) => {
  if (rowIndex === 0) {
    return 'success-header-row'
  }
}

</script>

<style lang='scss'>
.line {
  width: 100%;
  background-color: #ebeef5;
  height: 1px;
  transform: rotate(16deg);
}

.first-head {
  .month {
    margin-left: 110px;
  }

  .arg {
    margin-left: 40px;
  }
}
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-table .success-column {
  background-color: #ecf5ff;
}

.el-table .success-header-row {
  background-color: #e9e4cf!important;
}

</style>